<template>
    <div class="decorate1" >
      <img class="icon_tl" :src="decorate1" alt="">
      <img class="icon_tr" :src="decorate1" alt="">
      <img class="icon_bl" :src="decorate1" alt="">
      <img class="icon_br" :src="decorate1" alt="">
      <slot></slot>
    </div>
  </template>
  
  <script lang="ts">
  import {
    defineComponent,
  } from "vue";
  
  // 声明类型

  
  // 声明类型
  export default defineComponent({
    name:'decorate1',
    components: {},
    setup() {
      //变量
      const decorate1 = require("@/assets/img/decorate1.png");
      // return
      return {
        decorate1,
      };
    },
    
  });
  </script>
  
  <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .decorate1{
    position: relative;
    min-height: 40px;
    padding: 8px 28px;
    background: linear-gradient(180deg, #93c7f54d 0%, rgba(61,116,153,0.3) 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    .icon_tl{
			position: absolute;
			top: 4px;
			left: 4px;
			transform: rotate(0deg);
    }
		.icon_tr{
			position: absolute;
			top: 4px;
			right: 4px;
			transform: rotate(90deg);
    }
		.icon_bl{
			position: absolute;
			bottom: 4px;
			left: 4px;
			transform: rotate(270deg);
    }
		.icon_br{
			position: absolute;
			bottom: 4px;
			right: 4px;
			transform: rotate(180deg);
    }
  }
  
  </style>
  